<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echart库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js"></script>
    <!-- 从官网主题编辑器引入主题 -->
    <script src="backgroud.js"></script>
    <style>
        #chart {        
            /* 给chart dom指定长宽 */
            width: 800px;
            height: 400px;
        }
    </style>
    
</head> 
<body>
    <div id="chart"></div>

    <script> 
        
        
        const chartDom = document.getElementById('chart');  //获取dom
        //初始化 第二个参数为主题 官方默认提供light和dark模式 第三个参数渲染样式为svg 默认为canvas
        //canvas适合频繁更新 svg适合大屏显示
        const chart = echarts.init(chartDom);   
        chart.setOption({              //给dom指定标题
            dataset:{                   //数据集  对数据集中处理
                source: [               
                    ['一季度',34,50,"分类1",65],
                    ['二季度',77,60,"分类2",55],
                    ['三季度',23,70,"分类3",25],
                    ['四季度',43,90,"分类4",85]
                ]
            },
            title:{   
                text:'Echarts 多坐标系案例',
                subtext:'数据可视化'       //渲染出小字样
            },
            xAxis:{
                data:['一季度','二季度','三季度','四季度']
            },            //x轴参数 
            yAxis:{},            //y轴参数
            legend:{              //图例 点击隐藏 
                data:[{name:'分类',
                    icon:'circle',
                    textStyle:{
                        color:'red'
                }
            } ,'折线图','柱状图']
            },
            grid:{          //定位
                top:100,
                left:'10%',
                right:'10%',
                bottom:100
            },
            toolbox:{
                feature:{
                    dataZoom:{
                        yAxisIndex: false
                    },        //区域放大缩小
                    restore:{},       //还原
                    saveAsImage:{}   //保存图片
                }
            },
            dataZoom:[        //滑动区域条
                {
                    show:true,
                    start:0,
                    end:100
                }
            ],
            series:[          ////数据和图片类型
                {
                name:'分类',
                type: 'pie',   //饼图
                center:['70%',60],   //位置 最左侧50%，60个像素
                radius: 35,      //半径
                encode:{itemName:3,value:4}  //饼图模块名为第三列（从0开始），值为第四列
            },{
                name:'折线图',
                type: 'line',     //折线图
                encode:{x:0,y:1 } 
            }, {
                name:'柱状图',             
                type: 'bar',     //柱状图
                encode:{x:0,y:1 } 
            }]            
        });
    </script>
</body>
</html>